<template>
  <!-- doc -->
  <el-dialog v-model="dialogDocxValue" :title="dialogTitle" width="80%" @close="dialogDocxClose">
    <el-link :href="`${linkSrc}`" :underline="false" target="_blank" class="margin-bottom" v-if="linkSrc">
      <el-button>下载</el-button>
    </el-link>
    <div ref="docxRef" class="word-div"></div>
  </el-dialog>

  <!-- xlsx -->
  <el-dialog v-model="dialogXlsxValue" :title="dialogTitle" width="80%" @close="dialogXlsxClose">
    <el-link :href="`${linkSrc}`" :underline="false" target="_blank" class="margin-bottom" v-if="linkSrc">
      <el-button>下载</el-button>
    </el-link>
    <div ref="xlsxRef" class="xlsx-div">
      <el-tabs v-model="activeName" type="border-card">
        <el-tab-pane v-for="(item, index) in excelSheet" :key="index" :label="item.name" :name="item.name">
          <div class="table" v-html="item.html"></div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>

  <!-- 图片 -->
  <el-dialog v-model="dialogImgValue" :title="dialogTitle" width="80%" @close="dialogImgClose">
    <el-link :href="`${linkSrc}`" :underline="false" target="_blank" class="margin-bottom" v-if="linkSrc">
      <el-button>下载</el-button>
    </el-link>
    <div class="img-div">
      <el-image :src="fileData.src" :alt="fileData.fileOldName" />
    </div>
  </el-dialog>

  <!-- pdf -->
  <el-dialog v-model="dialogPdfValue" :title="dialogTitle" width="80%" @close="dialogPdfClose">
    <el-link :href="`${linkSrc}`" :underline="false" target="_blank" class="margin-bottom" v-if="linkSrc">
      <el-button>下载</el-button>
    </el-link>
    <div class="pdf-div">
      <iframe id="pdfRef" :src="iframeUrl" frameborder="0" style="width: 100%; height: 99%"></iframe>
    </div>
  </el-dialog>

  

</template>
<script setup lang="ts">
import axios from "axios";
import { defineProps, ref, reactive, computed, nextTick } from "vue";
import { renderAsync } from "docx-preview";
import * as XLSX from "xlsx";
interface Props {
  dialogDocx?: boolean;
  dialogXlsx?: boolean;
}
const props: any = withDefaults(defineProps<Props>(), {
  dialogDocx: false,
  dialogXlsx: false,
});
const { proxy } = getCurrentInstance();
const dialogDocxValue: any = ref(false);
let dialogTitle = ref();
const fileHtml = ref("");
const linkSrc = ref();

const docxRef = ref<any>();
// doc 文档预览
const viewDocx = (data: any, prefixName: String, title: String) => {
  docxRef.value = "";
  dialogDocxValue.value = true;
  if (data.src) {
    linkSrc.value = data.src;
    // 已上传的文件
    let srcFile = "";
    if (data.src.indexOf(",")) {
      srcFile = data.src.split(",")[0];
    } else {
      srcFile = data.src;
    }
    axios({
      url: srcFile,
      method: "get",
      responseType: "blob",
    }).then((res) => {
      if (res.status == 200) {
        const content = res.data;
        const blob = new Blob([content]);
        nextTick(() => {
          dialogDocxValue.value = true;
          dialogTitle.value = title ? title : data.name;
          renderAsync(blob, docxRef.value).then(
            (reson) => {
              dialogDocxValue.value = true;
              dialogTitle.value = title ? title : data.name;
            },
            (err) => {
              dialogDocxValue.value = false;
              proxy.$modal.msg("由于文档是doc旧版本,需要下载预览");
              downloadFile(srcFile, prefixName);
              // console.log(err, "错误");
            }
          );
        });
      }
    });
  } else {
    // 本地文件
    const blob = new Blob([data.raw]);
    nextTick(() => {
      dialogDocxValue.value = true;
      renderAsync(blob, docxRef.value);
      dialogTitle.value = title ? title : data.name;
    });
  }
};
const dialogXlsxValue: any = ref(false);
const excelSheet: any = ref([]);
const activeName = ref("");
const dialogDocxClose = () => {
  dialogDocxValue.value = false;
  docxRef.value = "";
};
const downloadFile = (fileName, prefixName) => {
  const fileUrl = "/path/to/" + fileName; // 文件的URL地址
  const link = document.createElement("a");
  link.href = fileUrl;
  link.setAttribute("download", `${prefixName}_${new Date().getTime()}`);
  link.click();
};
// xlsx 预览
const viewXlsx = (data: any, title: String) => {
  dialogXlsxValue.value = true;
  if (data.src) {
    linkSrc.value = data.src;
    axios({
      url: data.src,
      method: "get",
      responseType: "blob",
    }).then((res) => {
      if (res.status == 200) {
        const content = res.data;
        // const blob = new Blob(content);
        const reader = new FileReader();
        reader.readAsArrayBuffer(content);
        reader.onload = function (loadEvent: any) {
          const arrayBuffer = loadEvent.target["result"];
          const workbook = XLSX.read(new Uint8Array(arrayBuffer), {
            type: "array",
          });
          const list = [];
          const sheetNames = workbook.SheetNames;
          let index = 0;
          activeName.value = title ? title + "_" + (index + 1) : sheetNames[0];

          for (const p of sheetNames) {
            index++;
            let html = "";
            try {
              html = XLSX.utils.sheet_to_html(workbook.Sheets[p]);
            } catch (e) {
              html = "";
            }
            const map = {
              name: title ? title + "_" + index : p,
              html: html,
            };
            list.push(map);
          }
          excelSheet.value = list;
          dialogTitle.value = title ? title : data.name;
        };
      }
    });
  } else {
    const blob = new Blob([data.raw]);
    const reader = new FileReader();
    reader.readAsArrayBuffer(blob);
    reader.onload = function (loadEvent: any) {
      const arrayBuffer = loadEvent.target["result"];
      const workbook = XLSX.read(new Uint8Array(arrayBuffer), {
        type: "array",
      });
      const list = [];
      const sheetNames = workbook.SheetNames;
      activeName.value = sheetNames[0];
      let index = 0;
      for (const p of sheetNames) {
        index++;
        let html = "";
        try {
          html = XLSX.utils.sheet_to_html(workbook.Sheets[p]);
        } catch (e) {
          html = "";
        }
        const map = {
          name: title ? title + "_" + index : p,
          html: html,
        };
        list.push(map);
      }
      excelSheet.value = list;
      dialogTitle.value = title ? title : data.name;
    };
  }
};

const dialogXlsxClose = () => {
  dialogXlsxValue.value = false;
  excelSheet.value = "";
  activeName.value = "";
};
const fileData: any = ref({});
const dialogImgValue: any = ref(false);
// 图片预览
const viewImg = (data: any, title: String) => {
  if (data.src) {
    // 已上传的图片
    linkSrc.value = data.src;
    fileData.value = data;
  } else {
    // 本地图片
    const freader = new FileReader();
    freader.readAsDataURL(data.raw);
    freader.onload = (e: any) => {
      fileData.value = {
        src: e.target.result,
        id: new Date(),
        fileName: data.fileOldName || data.name,
      };
    };
  }
  dialogTitle.value = title ? title : data.name;
  dialogImgValue.value = true;
};
const dialogImgClose = () => {
  dialogImgValue.value = false;
};

const dialogMultiple: any = ref(false);
const dialogPdfValue: any = ref(false);
const iframeUrl: any = ref("");
const pdfRef = ref<any>();
const viewPdf = (data: any, title: String) => {
  dialogTitle.value = title;
  if (data.src) {
    linkSrc.value = data.src;
    axios({
      url: data.src,
      method: "get",
      responseType: "blob",
    }).then((res) => {
      if (res.status == 200) {
        // 把文件流转化为url
        iframeUrl.value = URL.createObjectURL(res.data);
        dialogPdfValue.value = true;
      }
    });
  } else {
    iframeUrl.value = URL.createObjectURL(data.raw);
    dialogPdfValue.value = true;
  }
};
const dialogPdfClose = () => {
  dialogPdfValue.value = false;
};
defineExpose({
  viewDocx,
  viewXlsx,
  viewImg,
  viewPdf,
});
</script>
<style scoped lang="scss">
.word-div {
  height: calc(70vh);
  overflow: auto;
}
.xlsx-div {
  height: calc(70vh);
  overflow: auto;
}
.img-div {
  height: calc(70vh);
  overflow: auto;
  img {
    width: 100%;
    height: 100%;
  }
}
.pdf-div {
  height: calc(70vh);
  overflow: auto;
}
</style>
<style lang="scss">
.xlsx-div {
  .table-html-wrap table {
    border-right: 1px solid #fff;
    border-bottom: 1px solid #e8eaec;
    border-collapse: collapse;
    // margin: auto;
  }

  .table-html-wrap table td {
    border-left: 1px solid #e8eaec;
    border-top: 1px solid #e8eaec;
    white-space: wrap;
    text-align: left;
    min-width: 100px;
    padding: 4px;
  }

  table {
    border-top: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5;
    width: 100%;
    // overflow: auto;

    tr {
      height: 44px;
    }

    td {
      min-width: 200px;
      max-width: 400px;
      padding: 4px 8px;
      border-right: 1px solid #ebeef5;
      border-bottom: 1px solid #ebeef5;
    }
  }

  .el-tabs--border-card > .el-tabs__content {
    overflow-x: auto;
  }
}
.margin-bottom{
  margin-bottom:10px;
}
</style>

